import React, { useContext } from 'react';

// 1. 创建一个上下文
const TitleContext = React.createContext()

const Second = ()=>{
  // 3. 在函数式组件中通过 useContext(TitleContext) 进行接收
  const content = useContext(TitleContext)
  return (<>
    <h1>Second</h1>
    <p>{content.title} -- {content.msg}</p>
  </>)
}


const First = ()=>{
  const content = useContext(TitleContext)
  return (<>
    <h1>First - <span>{content.title}</span></h1>

    <hr />
    <Second />
  </>)
}

const App = () => {
  return (
    <div>
      你笑起来真好看
      {/* 2. 通过 TitleContext.Provider 配合 value 将参数传递到后代组件中 */}
      <TitleContext.Provider value={{title: '传家宝', msg: '失败是成功之母，但是你失败次数多了，....'}}>
        <First />
      </TitleContext.Provider>

    </div>
  );
};

export default App;
